<script setup lang="ts">
import { ref } from 'vue';
interface btn {
    key: string,
    name: string,
}
interface Props {
    placeholder?: string,
    actions?: Array<btn>,
    buttons?: Array<btn>
}
const emit = defineEmits(["changeValue", 'refresh', 'btnEvent']);
let timer: any = null
const props = defineProps<Props>();
const value = ref("")
const handelShow = ref(false)
const search = (e: any) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
        if (value.value) {
            emit('changeValue', value.value)
        }
    }, 200);
}
const init = () => {
    value.value = ''
    emit('changeValue', '')
    emit('refresh', value.value)

}
const handelClick = (e:btn) => {
   emit('btnEvent',e.key)
}
const changeHandelShow = () =>{
    handelShow.value = !handelShow.value
}
defineExpose({
    changeHandelShow
})
</script>
<template>
    <div class="bar">
        <div class="left">
            <slot name="left"></slot>
        </div>
        <div class="right flex">
            <el-input v-model="value" @keyup.enter="search" style="max-width: 300px"
                :placeholder="props.placeholder || '请输入你想搜索的内容'" class="input-with-select">
                <template #append>
                    <el-button @click="search">
                        <FontIcon iconKey="Search"></FontIcon>
                    </el-button>
                </template>
            </el-input>
            <div class="flex btn-warp">

                <el-button v-for="(item, index) in props.buttons" :key="index" type="primary" @click="handelClick(item)">{{
                    item.name }}</el-button>
                <el-button @click="init">
                    <FontIcon iconKey="RefreshRight"></FontIcon>
                </el-button>
                <el-popover placement="bottom" :width="100" trigger="click" v-if="actions && actions.length > 0">
                    <template #reference>
                        <el-button>
                            <FontIcon iconKey="Setting"></FontIcon>
                        </el-button>
                    </template>
                    <div v-for="(item, index) in actions" :key="index">
                        <el-button style="width: 100%" link size="small" @click="handelClick(item)">{{ item.name
                        }}</el-button>
                    </div>

                </el-popover>
                <el-button @click="changeHandelShow" v-if="$slots.query">
                    <FontIcon :iconKey="handelShow? 'Finished' :'Operation'"></FontIcon>
                </el-button>
            </div>
        </div>
        <el-collapse-transition v-if="$slots.query">
            <div v-show="handelShow" class="query">
                <slot name="query"></slot>
            </div>
        </el-collapse-transition>
    </div>
</template>
<style lang="scss" scoped>
.bar {
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;

    // background-color: red;
    .right {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .btn-warp {
            margin-left: 20px;
        }
    }

}

.query {
    width: 100%;
    position: absolute;
    left: 0;
    top: 40px;
    background-color: #fff;
    z-index: 99;
    padding: 20px; 
    box-shadow: 0 11px 8px -6px #00000010;
}</style>